// 商品分类
var goodClass = "";
dataList.navs.forEach(function (item) {
  var domStr = `<li>
                    <a href="./list.html?class=${item.class}">
                        <div>
                            <img src="${item.icon}"
                                alt="" />
                        </div>
                        <div>${item.title}</div>
                    </a>
                </li>`;
  goodClass += domStr;
});

$1(".head_list3_menu").innerHTML = goodClass;


// 获取商品分类参数
var listClass = getQueryString('class');
// 获取到要渲染的数据
var data = dataList[listClass];

// 开始渲染数据
$1('.div_bg').style.backgroundImage='url('+data.banner.bgimg+')'
$1('.bg_text').innerHTML = data.banner.title;



$1('.Mavic_head h1').innerHTML = data.title;

// 渲染主体数据
$1(".Mavic_list1_left a").href = "./product.html?id=" + data.main.id;
$1(".Mavic_list1_left img").src = data.main.imgurl;
$1(".Mavic_list1_left h2").innerText = data.main.title;
$1('.Mavic_list1_left p').innerText=data.main.description;
$1(".Mavic_list1_left i").innerText = data.main.price;
$1(".main_bag").style.backgroundImage = "url(" + data.main.poster + ")";

// 渲染分类列表
var listStr = '';
data.list.forEach(function (item) {
    var domStr = `
        <li>
                <a href="./product.html?id=${item.id}">
                <div><img
                        src=${item.imgurl}
                        alt=""></div>
                <div>
                    <h2>${item.title}</h2>
                    <p>${item.description}</p>
                    <span>￥<i>${item.price}</i></span>
                </div>
                </a>
            </li>
    `;
    listStr += domStr;
})
$1('.shop_list').innerHTML = listStr;